<template>
	<view>
		<view class="block">
			<view class="title">本月目标</view>
			<view class="input-option">
				<view class="left-nums">
					￥0.00
				</view>
			</view>
			<view class="data-nums">
				<view class="nums-one">
					<span>本月销售额</span>
					<view class="txt">￥3.00</view>
				</view>
				<view class="nums-one" @click="openPopup">
					<span>目标完成率</span>
					<view class="txt">0%</view>
				</view>
			</view>
			<view class="fen-xi-option">
				<!-- <view class="icon"></view> -->
				<image src="../../static/manageMent/qushi.png" class="icon"></image>
				<view class="txt">查看图表分析</view>
			</view>
		</view>
		<view class="tools-block">
			<view class="item-option" @click="editClick">
				<image src="../../static/manageMent/qushi.png" class="icon"></image>
				<view class="txt">今日报账</view>
			</view>
			<view class="item-option" @click="billRecordClick">
				<image src="../../static/manageMent/jizhang.png" class="icon"></image>
				<view class="txt">账单记录</view>
			</view>
		</view>
		<view class="lst-block">
			<view class="hint-option">
				今日即开收入￥{{takeRecordObj.daySumMoney||0.00}}
			</view>

			<view class="lst-item" v-for="(item,index) in lst" :key="index">
				<image src="../../static/manageMent/guagua.png" class="left-img"></image>

				<view class="right-option">
					<view class="top-option">
						<view class="left-txt">{{item.typeName}}</view>
						<view class="right-txt">￥{{item.money}}</view>
					</view>
					<view class="bottom-option">
						<view class="left-txt">备注:{{item.remark||'无'}}</view>
						<view class="right-txt">{{getDate(item.createTime)}}</view>
					</view>
				</view>
			</view>

			<emty v-if="lst.length==0">

			</emty>

		</view>
		<view style="height: 200rpx;"></view>
		<view class="fixed-block">
			<view class="create-block" @click="addClick()">
				<!-- <view class="icon"></view> -->
				<image src="../../static/manageMent/edit.png" class="icon"></image>
				<view class="txt">记一笔<span>(即开)</span></view>
			</view>
		</view>
		<uni-popup ref="popupRef">
			<view class="popup-center">
				<view class="hint-txt">设置目标</view>
				<view class="content-block">
					<view class="input-option">
						<view class="txt">￥</view>
						<input class="input-class" placeholder="请输入金额" />
					</view>
				</view>
				<view class="sumbit-option">
					<view class="btn-submit cancel" @click="cancel">
						取消
					</view>

					<view class="btn-submit  " @click="confirm">
						确认
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup ref="popupMoneyRef">
			<view class="popup-center">
				<view class="hint-txt">设置前日账户余额</view>
				<view class="content-block">
					<view class="input-option">
						<view class="txt">￥</view>
						<input class="input-class" v-model="data29" placeholder="请输入金额" />
					</view>
				</view>
				<view class="sumbit-option">
					<view class="btn-submit cancel" @click="popupMoneyRefCancel">
						取消
					</view>

					<view class="btn-submit" @click="popupMoneyRefConfirm">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				data29: '',
				lst: [],
				page: 0,
				takeRecordObj: {},
			}
		},
		onShow() {

			this.getInstantTakeRecordListFn()
		},
		onReachBottom() {
		 
			this.$http('manageMent.getInstantTakeRecordList', {
				token: this.$tools.getToken(),
				page: this.lst.length,
				typeName: '',
				beginTime: -1,
				endTime: -1,
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.lst.push(...res.data.list)
						this.takeRecordObj = res.data
					} else {
						 
					}
				} else {
					 
				}
			})
		},
		methods: {
			getInstantTakeRecordListFn() {
				this.$http('manageMent.getInstantTakeRecordList', {
					token: this.$tools.getToken(),
					page: this.page,
					typeName:'',
					beginTime: -1,
					endTime: -1,
				}).then(res => {
					if (res.code == 200) {
						this.lst = res.data.list
						this.takeRecordObj = res.data
					}
					console.log('res===getInstantTakeRecordListFn==>', res)
				})
			},
			initTwo() {
				this.$http('manageMent.getHistoryBill', {
					token: this.$tools.getToken()
				}).then(res => {
					if (res.code == 200) {
						if (res.data.count == 0) {
							this.$nextTick(() => {
								this.openMoneyPopup()
							}, 100)
						} else {
							this.editClick()
						}
					}
				})
			},
			init() {
				this.$http('manageMent.getBillList', {
					page: this.page,
					status: this.status,
					token: this.$tools.getToken()
				}).then(res => {
					console.log('res=', res)
				})
			},
			addClick() {
				uni.navigateTo({
					url: '/pages/manageMent/addOpenRecord'
				})
			},
			editClick() {
				this.$http('manageMent.getHistoryBill', {
					token: this.$tools.getToken()
				}).then(res => {
					if (res.code == 200) {
						if (res.data.count == 0) {
							this.$nextTick(() => {
								this.openMoneyPopup()
							}, 100)
						} else {
							uni.navigateTo({
								url: '/pages/manageMent/editBill?type=0'
							})
						}
					}
				})


			},
			billRecordClick() {
				uni.navigateTo({
					url: '/pages/manageMent/billingRecord'
				})
			},
			openPopup() {
				this.$refs.popupRef.open('center')
			},
			cancel() {
				this.$refs.popupRef.close()
			},
			confirm() {
				this.$refs.popupRef.close()
			},
			openMoneyPopup() {
				this.$refs.popupMoneyRef.open('center')
			},
			popupMoneyRefCancel() {
				this.$refs.popupMoneyRef.close()
			},
			popupMoneyRefConfirm() {
				uni.showLoading({
					title: '提交中'
				})
				this.$http('manageMent.newAddBill', {
					token: this.$tools.getToken(),
					data29: this.data29
				}).then(res => {
					uni.hideLoading()
					this.$tools.showMsg(res.msg)
					this.$refs.popupMoneyRef.close()
					if (res.code == 200) {

					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.block {
		padding: 32rpx 24rpx;
		background: #fff;
		border-radius: 8rpx;
		margin: 24rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			// color: #999999;
		}

		.input-option {
			display: flex;
			align-items: center;
			margin-top: 34rpx;

			.left-nums {
				flex: auto;
				font-weight: bold;
				font-size: 32rpx;
			}

			.icon {
				flex: none;
				width: 46rpx;
				height: 46rpx;
			}
		}

		.data-nums {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #EFEFEF;

			.nums-one {
				display: flex;
				align-items: center;
				flex: 1;

				span {
					color: #999999;
				}

				.txt {
					margin-left: 24rpx;

				}
			}


		}

		.fen-xi-option {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 46rpx;
				height: 46rpx;
			}

			.txt {
				color: #1B8BF6;
				font-size: 32rpx;
				padding-left: 24rpx;
			}
		}
	}

	.tools-block {
		margin-top: 34rpx;
		display: flex;
		align-items: center;

		.item-option {
			margin-left: 24rpx;
			margin-right: 24rpx;
			background: #fff;
			border-radius: 8rpx;
			padding: 24rpx;
			flex: 1;
			display: flex;
			align-items: center;

			.icon {
				width: 42rpx;
				height: 42rpx;
			}

			.txt {
				margin-left: 24rpx;
				font-size: 30rpx;
			}
		}
	}

	.lst-block {
		margin-top: 44rpx;

		.hint-option {
			margin-left: 24rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 34rpx;
		}

		.lst-item {
			background: #fff;
			padding: 24rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.left-img {
				flex: none;
				width: 64rpx;
				height: 64rpx;
			}

			.right-option {
				flex: auto;
				margin-left: 24rpx;

				.top-option {
					display: flex;
					align-items: center;

					.left-txt {
						flex: auto;
						font-size: 34rpx;
					}

					.right-txt {
						font-size: 28rpx;
						flex: none;
					}
				}

				.bottom-option {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					.left-txt {
						font-size: 28rpx;
						flex: auto;
						color: #9E9E9E;
					}

					.right-txt {
						flex: none;
						font-size: 28rpx;
						color: #9E9E9E;
					}
				}
			}
		}
	}

	.fixed-block {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 180rpx;
		background: #F8F8F8;
		z-index: 111rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.create-block {
			display: flex;
			align-items: center;
			border-radius: 365rpx;
			background: #fff;
			padding: 24rpx 60rpx;
		}

		.icon {
			width: 46rpx;
			height: 46rpx;
		}

		.txt {
			font-weight: bold;
			font-size: 32rpx;
			margin-left: 12rpx;

			span {
				font-weight: 400;
				font-size: 28rpx;
			}
		}

		.edit-btn {
			// margin-left: 44rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			position: fixed;
			right: 40rpx;
			bottom: 40rpx;
			z-index: 444rpx;
		}
	}

	.popup-center {
		background: #fff;
		width: 640rpx;
		border-radius: 8rpx;

		.hint-txt {
			padding: 24rpx;
			color: #fff;
			font-size: 32rpx;
			background: #878787;
		}

		.content-block {
			margin: 64rpx 24rpx 0 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #EFEFEF;

			.input-option {
				display: flex;
				align-items: center;

				.input-class {
					margin-left: 18rpx;
				}
			}
		}

		.sumbit-option {
			margin-top: 24rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.btn-submit {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 30rpx;
				width: 226rpx;
				height: 76rpx;
				border-radius: 8rpx;
				background: linear-gradient(153deg, #69C5FD 0%, #0089CF 63%);
			}

			.cancel {
				background: #fff;
				color: #7ABCF4;
				border: 1rpx solid #7ABCF4;
			}
		}
	}
</style>